<template>
  <div>
    <table>
      <!--      <thead>-->
      <!--      <tr>-->
      <!--        <th>Color</th>-->
      <!--        <th>Action</th>-->
      <!--      </tr>-->
      <!--      </thead>-->
      <tbody>
      <tr v-for="(color, index) in colors" :key="index">
        <td>
          <div :style="{ backgroundColor: color, width: '30px', height: '30px' }"></div>
        </td>
        <td>
          <button @click="selectColor(color)"></button>
        </td>
      </tr>
      </tbody>
    </table>
    <div>
      <input type="color" v-model="selectedColor">
      <!--      <div :style="{ backgroundColor: selectedColor, width: '30px', height: '30px' }"></div>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colors: ['#ff0000', '#00ff00', '#0000ff'],
      selectedColor: null
    }
  },
  methods: {
    selectColor(color) {
      this.selectedColor = color
      alert(`Selected color: ${color}`)
    }
  }
}
</script>
